<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
</head>
<body>
<div id="box">
    <my-aa></my-aa>
    <template id="aaa">
        <h3 @click="change">标题->{{msg}}</h3>
        <ul>
            <li v-for="val in arr">
                {{val}}
            </li>
        </ul>
    </template>
</div>

</body>
<script type="text/javascript" src="./bower_components/vue/dist/vue.min.js"></script>
<script>
    var vm=new Vue({
        el:'#box',
        components:{
            'my-aa':{
                data(){
                    return {
                        msg:'hello',
                        arr:['orange','apple','pear'],
                    }
                },
                methods:{
                    change(){
                        alert(1111);
                        this.msg="changed";
                    }
                },
                template:'#aaa'
            }
        }
   });
//  1、  template:'<strong @click="change">好=={{msg}}</strong>'  详情看 vue组件另一种编写方式.html
//  2、见本例
//  3、见下例
//  总结：如果是一个标签，建议使用
</script>
</html>